<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
        /* #menu{
            width: 150px;
        } */
        .ui-menu:after{
            content:".";
            display: block;
            clear:both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
        .ui-menu .ui-menu-item{
            display: inline-block;
            float: left;
            margin: 0;
            padding: 0;
            width:auto;

        }
        </style>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
        <script src="jquery-ui.min.js"> </script>
        <script >
           $(document).ready(function(){
               $("#menu").menu({position:{at:"left bottom"}});
           });
        </script>
        <link rel="stylesheet" href="jquery-ui.min.css">
    </head>
    <body>
       <ul id="menu">
           <li>
               <a href="#">java </a>
               <ul>
                   <li><a href="#">java ee</a></li>
                   <li><a href="#">java se</a></li>
                   <li><a href="#">java me</a></li>
               </ul>
           </li>
           <li>
               <a href="">c</a>
               <ul>
                    <li><a href="#">java ee</a></li>
                    <li><a href="#">java se</a></li>
                    <li><a href="#">java me</a></li>
                </ul>
           </li>
           <li>c++</li>
           <li>php</li>

       </ul>
       

        </div>
    </body>
</html>